<template>
  <div v-if="visiable" class="van-overlay" style="z-index: 999;" @click.self = "handleClickHide">
    <div class="messaeg_flex">
      <div class="message_wrapper" @click.self = "handleClickHide">
        <div class="message_block">
          <div class="message_info">
            <img src="../../static/img/notice1.png" alt="">
            <img src="../../static/img/notice2.png" alt="">
            <img src="../../static/img/notice3.png" alt="">
          </div>
          <div class="message_info_content">
            <div class="message_body">
              <div class="message_title1"></div>
              <div class="message_content1" style='height: 100%;'>
                <p v-html="text">
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="message_wrapper">
        <img @click="handleClickHide" src="../../static/img/notice_close.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'NoticeAlert',
        data () {
            return {
                text: '',
                visiable: false,
                id: '',
            }
        },
        mounted () {
            setTimeout(()=>{
                this.getData();
            },1000);
        },
        methods: {
            getData(){
                this.$axios.get(this.$api_url.get_notice2).then((res)=>{
                    if( res.data ){
                        let old_id = sessionStorage.getItem('notice_id');
                        if(old_id != res.data.id){
                            this.text = res.data.text;
                            this.id = res.data.id;
                            this.visiable = true;
                        }
                    }
                })
            },
            handleClickHide(){
                this.visiable = false;
                sessionStorage.setItem('notice_id',this.id);
            }
        }
    }
</script>

<style scoped>
  .van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
  }
  .messaeg_flex{
    text-align: left;
  }
  .message_wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
  }
  .message_block {
    width: 90%;
    height: 55vh;
    margin-top: 2.666667rem;
    border-radius: .266667rem;
    background: url(/static/img/link.png) 2rem no-repeat,-webkit-gradient(linear,left top,left bottom,from(#ffcc2c),color-stop(60%,#fff));
    background: url(/static/img/link.png) 2rem no-repeat,linear-gradient(top,#ffcc2c,#fff 60%);
  }
  .message_block .message_info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: .826667rem;
  }
  .message_wrapper img {
    margin-top: 1.066667rem;
    height: .8rem;
  }
  .message_block .message_info img:nth-child(odd) {
    margin-top: .2rem;
    height: .4rem;
  }
  .message_block .message_info img:nth-child(2n) {
    height: .8rem;
    margin: 0 .293333rem;
  }
  .message_block .message_info img:nth-child(odd) {
    margin-top: .2rem;
    height: .4rem;
  }
  .message_block .message_info_content {
    margin: .533333rem auto;
    border-radius: .213333rem;
    width: 92%;
    height: 30vh;
    background-color: #fff;
  }
  .message_body {
    padding: .133333rem .266667rem;
    color: #434343;
    overflow: auto;
    height: 6.666667rem;
  }
  .message_title1 {
    font-size: .4rem;
    font-weight: 600;
    margin: .2rem auto;
  }
  .message_body .message_content1 {
    width: 100%;
    height: 3.733333rem;
    overflow-y: auto;
    word-wrap: break-word;
  }
  .message_body .message_content1 p {
    line-height: .64rem;
    font-size: .426667rem;
    font-weight: 500;
  }
  .message_wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
  }
</style>
